<template>
  <div>
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="params.query" class="demo-form-inline">
      <el-form-item label="项目名称">
        <el-input v-model="params.query.projectName" placeholder="请输入项目名称" size="small"></el-input>
      </el-form-item>
      <el-form-item label="项目类型">
        <el-select v-model="params.query.projectType" placeholder="项目类型" size="small">
          <el-option
            :label="item.value"
            :key="item.code"
            :value="item.code"
            v-for="item in projectTypeArray"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开发语言">
        <el-select v-model="params.query.codeLanguage" placeholder="开发语言" size="small">
          <el-option
            :label="item.value"
            :key="item.code"
            :value="item.code"
            v-for="item in codeLanguageArray"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="构建类型">
        <el-select v-model="params.query.buildType" placeholder="构建类型" size="small">
          <el-option
            :label="item.value"
            :key="item.code"
            :value="item.code"
            v-for="item in buildTypeArray"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否生效">
        <el-select v-model="params.query.enableFlag" placeholder="是否生效" size="small">
          <el-option label="生效" value="1"></el-option>
          <el-option label="无效" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addRow">新增</el-button>
      </el-form-item>
    </el-form>

    <!--分割线 -->
    <el-divider></el-divider>

    <el-table
      :data="history"
      style="width: 100%"
      border
      highlight-current-row
      :default-sort="{prop: 'updateTime', order: 'descending'}"
    >
      <el-table-column type="index" width="50" align="center"></el-table-column>
      <el-table-column prop="projectName" label="项目名称" align="center" sortable></el-table-column>
      <el-table-column prop="projectDesc" label="项目描述" align="center"></el-table-column>
      <el-table-column prop="projectType" label="项目类型" align="center"></el-table-column>
      <el-table-column prop="codeLanguage" label="开发语言" align="center"></el-table-column>
      <el-table-column prop="buildType" label="构建类型" align="center"></el-table-column>
      <el-table-column prop="deployType" label="部署类型" align="center"></el-table-column>
      <el-table-column
        prop="enableFlag"
        label="是否生效"
        align="center"
        :formatter="enableFlagFormatter"
      ></el-table-column>
      <el-table-column prop="updateTime" label="更新时间" align="center" sortable></el-table-column>
      <el-table-column prop="operation" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            @click="updateStatus(scope.row)"
            v-if="scope.row.enableFlag === 0"
          >启用</el-button>
          <br/>
          <el-button
            type="danger"
            size="mini"
            @click="updateRow(scope.row)"
            v-if="scope.row.enableFlag === 1"
          >更新</el-button>
           <br/>
          <el-button
            type="primary"
            size="mini"
            @click="delRow(scope.row)"
            v-if="scope.row.enableFlag === 1"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <el-pagination
      @size-change="pageSizeChange"
      @current-change="pageNowChange"
      :current-page="params.query.pageNow"
      :page-sizes="[10, 15, 20]"
      :page-size="params.query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="params.rowCount"
    ></el-pagination>

    <add_update_project
      :add-dialog-visible="addDialogVisible"
      :dictionary-type-array="dictionaryTypeArray"
      :dict-param="dictParam"
      :dialog-title="addDiaglogTitle"
      :operation="addOperation"
      v-on:closeAddDialog="closeAddDialog"
      v-on:search="search"
    ></add_update_project>

    <!-- 更新 -->
    <add_update_project
      :add-dialog-visible="updateDialogVisible"
      :dictionary-type-array="dictionaryTypeArray"
      :dict-param="dictParam"
      :dialog-title="updateDiaglogTitle"
      :operation="updateOperation"
      v-on:closeAddDialog="closeAddDialog"
      v-on:search="search"
    ></add_update_project>
  </div>
</template>

<script>
import Constants from "@/components/util/Constants";
import AddUpdateProject from "@/components/view/project/AddUpdateProject";
import { queryPublishDictByType } from "@/components/api/project";

export default {
  name: "ProjectConfig",
  components: {
    add_update_project: AddUpdateProject
  },
  data: function() {
    return {
      params: {
        query: {
          projectName: '',
          projectType: '',
          buildType: '',
          codeLanguage:'',
          enableFlag: 1,
          pageSize: 10,
          pageNow: 1
        }
      },
      addOperation: Constants.ADD_STR,
      updateOperation: Constants.UPDATE_STR,
      addDiaglogTitle: Constants.ADD,
      updateDiaglogTitle: Constants.UPDATE,
      addDialogVisible: false,
      updateDialogVisible: false,
      projectTypeArray: [],
      buildTypeArray: [],
      deployTypeArray: [],
      dictionaryTypeArray: [],
      codeLanguageArray: [],
      dictParam: {
        uuid: "",
        code: "",
        value: "",
        parentType: "",
        description: "",
        enableFlag: "1"
      },
      history: [
        {
          index: 0,
          projectName: "发版系统",
          projectDesc: "一站式项目发布系统",
          projectType: "后端",
          codeLanguage: "Java",
          buildType: "maven",
          deployType: "Docker Swarm",
          enableFlag: 0,
          updateTime: "2020-01-01 15:12:00"
        },
        {
          index: 1,
          projectName: "奖品系统",
          projectDesc: "奖品抽奖及发放系统",
          projectType: "后端",
          codeLanguage: "Java",
          buildType: "maven",
          deployType: "Docker Swarm",
          enableFlag: 1,
          updateTime: "2020-01-01 15:12:00"
        }
      ]
    };
  },
  methods: {
    search: function() {
      console.log("===========> search");
    },
    resetQuery: function() {},
    addRow: function() {
      this.addDialogVisible = true;
    },
    initMetaData: function() {
      queryPublishDictByType(data => {
        this.codeLanguageArray = data;
      }, "00001");

      queryPublishDictByType(data => {
        this.buildTypeArray = data;
      }, "00002");

      queryPublishDictByType(data => {
        this.projectTypeArray = data;
      }, "00004");
    },
    pageSizeChange(pageSize) {},
    pageNowChange(pageNow) {},
    enableFlagFormatter(row) {
      if (row.enableFlag === 1) {
        return Constants.TRUE;
      }
      return Constants.FALSE;
    },
    closeAddDialog() {
      //关闭对话框，数据初始化
      this.dictParam = {
        code: "",
        value: "",
        parentType: "",
        description: "",
        enableFlag: "1"
      };
      this.addDialogVisible = false;
      this.updateDialogVisible = false;
    }
  },
  mounted() {
    this.search();
    this.initMetaData();
  }
};
</script>